<template>
  <el-menu @select="handleSelect" default-active="pending" mode="horizontal">
    <el-menu-item index="pending">待提交({{ status.pending }})</el-menu-item>
    <el-menu-item index="send">
      已提交-未返回状态({{ status.send }})
    </el-menu-item>
    <el-menu-item index="success">发送成功({{ status.success }})</el-menu-item>
    <el-menu-item index="fail">发送失败({{ status.fail }})</el-menu-item>
  </el-menu>
  <Pending v-if="activeIndex == 'pending'" />
  <Send v-if="activeIndex == 'send'"></Send>
  <Success v-if="activeIndex == 'success'"></Success>
  <Fail v-if="activeIndex == 'fail'"></Fail>
</template>

<script setup>
import { reactive, ref } from 'vue';
import Pending from './Pending.vue';
import Send from './Send.vue';
import Success from './Success.vue';
import Fail from './Fail.vue';
import { countStatus } from '@/api/record';

const activeIndex = ref('pending');
let status = reactive({});

function handleSelect(key) {
  activeIndex.value = key;
}

function getCount() {
  countStatus().then(res => {
    if (res.code === '200') {
      // console.log(res.data.statusCount)
      //status = res.data.statusCount;
      Object.keys(res.data.statusCount).forEach(k => {
        status[k] = res.data.statusCount[k];
      });
      // console.log(status);
    }
  });
}

getCount();
</script>
